<template>
  <Option @delete="del" :styleType="newSurveyData.questions[order].type" v-for="(_, i) in _options" :key="i" v-model="_options[i]" :optionIndex="i" />

  <div class="config">
    <ul class="flex-center">
      <li class="flex-center hover-light" @click="addOption">
        <span class="svg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="coral-icon coral-icon-add_to_line" data-v-4154d7e6=""><path d="M11 8v3H8a1 1 0 100 2h3v3a1 1 0 102 0v-3h3a1 1 0 100-2h-3V8a1 1 0 10-2 0m.139-3.956a7.995 7.995 0 018.816 8.817c-.382 3.693-3.4 6.712-7.094 7.095a7.995 7.995 0 01-8.816-8.817c.382-3.693 3.4-6.712 7.094-7.095m2.558-1.903C6.867 1.009 1.009 6.868 2.14 13.697c.686 4.138 4.024 7.476 8.162 8.162 6.83 1.132 12.688-4.727 11.556-11.556-.686-4.138-4.023-7.476-8.162-8.162" fill-rule="evenodd" data-v-4154d7e6=""></path></svg>
        </span>
        <span class="text-padding">添加选项</span>
      </li>
      <li class="flex-center hover-light" :class="{active: order === newSurveyData.currentOrder && newSurveyData.batchEdit}" @click="newSurveyData.modifyBatchEdit(true)">
        <span class="svg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="coral-icon coral-icon-batch_add_to_option_line">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4a1 1 0 10-2 0v9a1 1 0 102 0"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11a1 1 0 10-2 0v9a1 1 0 102 0M13 4a1 1 0 10-2 0v16a1 1 0 102 0M18 21.007v-2h-2a1 1 0 110-2h2v-2a1 1 0 112 0v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0M20 4a1 1 0 10-2 0v7a1 1 0 102 0"></path>
            <path opacity="0.01" d="M0 0v24h24V0z"></path>
          </svg>
        </span>
        <span class="text-padding">批量编辑</span>
      </li>
    </ul>
  </div>
</template>

<script>
import Option from '@/components/Option.vue'
import newSurveyData from '@/store/new-survey-data'

export default {
  components: { Option },
  props: ['order'],
  data() {
    return {
      newSurveyData: newSurveyData(),
      _questions: newSurveyData().questions[this.order],
    }
  },
  computed: {
    _options() {
      let option
      try {
        option = newSurveyData().questions[this.order].options
      } catch (error) {
        console.warn('单选 computed options 时出错',error.message)
      }
      return option
    },
  },
  watch: {
    _options: {
      handler() {
        this.newSurveyData.storageQuestions()
      },
      deep: true,
    },
  },
  methods: {
    addOption() {
      this._options.push('')
      this.newSurveyData.storageQuestions()
    },
    del(optionIndex) {
      if (this._options.length <= 1) {
        this.$msg('至少要有一个选项', 'error')
        return
      }
      this.newSurveyData.delOption(this.order, optionIndex)
    },
  },
}
</script>

<style lang="scss" scoped>
.active {
  background-color: #fafafa;
  color: #448cff;
  border-color: #448cff;
  fill: #448cff;
}
.config {
  width: 90%;
  padding: 5px 10px;
  margin: 10px auto;

  > ul {
    padding: 10px auto;
    height: 40px;

    li {
      width: max-content;
      padding-right: 20px;
    }
  }
}
</style>
